<template>
  <!-- 过往经历 -->
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #content>过往经历</template>
    </cu-custom>

    <view class="sub">学校</view>

<!--    <Field
      disabled
      rightIcon
      autosize
      label="毕业学校"
      placeholder="去填写"
      v-model="userInfo.school"
      @click.stop="toSetValue('school', '毕业学校', `&text=${userInfo.school || ''}`)"
    /> -->

    <view class="cell-multiseriate" @click="toSetValues('attended_schools', '曾经就读的学校', `&maxlength=10`)">
      <view class="cell-multiseriate__title">
        曾经就读的学校
        <text class="arrow-right arrow__small cell-right__icon"></text>
      </view>

      <view class="cell-multiseriate__content">
        <view class="content-item" v-for="item in userInfo.attended_schools">&#8901; {{ item }}</view>
      </view>
    </view>

    <view class="sub">事业</view>
 <!--   <Field
      disabled
      rightIcon
      autosize
      label="现在工作单位"
      placeholder="去填写"
      v-model="userInfo.work_experience"
      @click.stop="toSetValue('work_experience', '现在工作单位', `&text=${userInfo.work_experience || ''}`)"
    /> -->

    <view class="cell-multiseriate" @click="toSetValues('previous_employer', '工作经历', `&maxlength=${10}`)">
      <view class="cell-multiseriate__title">
        工作经历
        <text class="arrow-right arrow__small cell-right__icon"></text>
      </view>

      <view class="cell-multiseriate__content">
        <view class="content-item" v-for="item in userInfo.previous_employer">&#8901; {{ item }}</view>
      </view>
    </view>

    <view class="sub">足迹</view>
    <view
      class="cell-multiseriate border-bottom-after"
      @click="toSetValues('lived_address', '曾经住过的地址', `&maxlength=${10}`)"
    >
      <view class="cell-multiseriate__title">
        曾经住过的地址
        <text class="arrow-right arrow__small cell-right__icon"></text>
      </view>

      <view class="cell-multiseriate__content">
        <view class="content-item" v-for="item in userInfo.lived_address">&#8901; {{ item }}</view>
      </view>
    </view>

    <view class="cell-multiseriate">
      <view class="cell-multiseriate__title">
        我的足迹
        <text class="arrow-right arrow__small cell-right__icon"></text>
      </view>

      <view class="cell-multiseriate__content cell-multiseriate__content-imgs">
        <view class="upimage-item" v-for="(item, index) in userInfo.footprint">
          <image class="upimage-item__image" :src="item.path || item" mode="aspectFit" @click="previewImage(index)" />
          <view @click="removeFile(index)" class="close-css_icon"></view>
        </view>

        <!-- 选择图片 -->
        <view
          class="upimage-item cross-css_icon add-image"
          v-show="userInfo.footprint.length < 3"
          @click="handleChooseFile"
        ></view>
      </view>
    </view>
  </Top-Page>
</template>

<script>
import Cell from '@/components/Cell/Cell.vue';
import Field from '@/components/Field/Field.vue';

import { saveInfo } from '@/hooks/useSaveChanges';

import { mixins } from './mixin/index';

export default {
  mixins: [mixins],

  data() {
    return {
      saveInfo,
      footprint: []
    };
  },
  components: { Cell, Field },
  onShow() {
    this.userInfo = JSON.parse(JSON.stringify(this.loginStore.userInfo));
    this.footprint = this.userInfo.footprint;
  },
  methods: {
    //设置/修改 内容
    toSetValue(type, title, extra) {
      uni.navigateTo({
        url: `/pages/rest/modify/modify?type=${type}&title=${title}${extra || ''}`
      });
    },
    //设置/修改 内容
    toSetValues(type, title, extra) {
      uni.navigateTo({
        url: `/pages/rest/modifys/index?type=${type}&title=${title}&${extra}`
      });
    },
    //选择图片
    handleChooseFile() {
      const maxSize = 5 * 1024 * 1024;
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          const file = res.tempFiles[0];

          if (file.size > maxSize) {
            uni.showToast({
              title: '文件大小不能超过5MB',
              icon: 'none'
            });
          } else {
            this.upImage(file);
          }
        }
      });
    },
    //删除
    removeFile(index) {
      this.userInfo.footprint.splice(index, 1);
      this.saveInfo({ footprint: this.userInfo.footprint });
    },
    //预览图片
    previewImage(index) {
      uni.previewImage({
        current: index, // 当前预览的图片路径
        urls: this.userInfo.footprint // 所有图片的路径列表
      });
    },
    //上传图片
    upImage(file) {
      uni.showToast({
        title: '上传中...',
        mask: true,
        duration: 999999,
        icon: 'none'
      });

      uni.uploadFile({
        url: this.$api.msgApi.uploadImage,
        filePath: file.path || file.tempFilePath,
        name: 'file',
        header: {
          Authorization: uni.getStorageSync('authToken')
        },
        success: (uploadRes) => {
          const res = JSON.parse(uploadRes.data);

          uni.hideToast();

          uni.showToast({
            title: `${res.msg}`,
            icon: 'none'
          });

          this.userInfo.footprint.push(res.data);
          this.saveInfo({ footprint: this.userInfo.footprint });
        },
        fail: (error) => {
          uni.hideToast();
          uni.showToast({
            title: `${error}`,
            icon: 'none'
          });
          console.log(error);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import url('./index.scss');
.sub {
  padding: 30rpx 30rpx 10rpx 30rpx;
  color: #999;
}
.cell-multiseriate {
  padding: 30rpx 40rpx;
  width: 100%;
  position: relative;
  display: flex;
  background-color: #fff;
  flex-direction: column;

  .cell-multiseriate__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .content-item {
    color: #666;
    margin-top: 12rpx;
    word-break: break-all;
  }
}

.cell-multiseriate__content-imgs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-top: 12rpx;

  //图片反显
  .upimage-item {
    position: relative;
    width: calc(var(--amplified_base) * 240rpx);
    height: calc(var(--amplified_base) * 240rpx);
    border-radius: calc(var(--amplified_base) * 16rpx);
    overflow: hidden;
    margin-left: 12rpx;

    .upimage-item__image {
      position: relative;
      width: 100%;
      height: 100%;
    }

    //删除图标
    .close-css_icon {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #f4f4f4;
      border-radius: 50%;

      &::before,
      &::after {
        width: 30rpx;
        height: 4rpx;
      }
    }
  }

  //添加图片
  .add-image {
    background: #f5f5f7;

    &::after,
    &::before {
      background-color: #a2a3a5;
    }

    &::after {
      left: calc(50% - 1rpx);
    }
  }
}
</style>
